<template>
		<div class="header" >	
		  <div class="content-wrapper">	
				<div class="avatar">
				  <img width="67" height="64" :src ="seller.avatar">			
				</div>
				<div class="content">
					<div class="title">
						<span class="brand">
							
						</span>
						<span class="name">
							{{seller.name}}
						</span>
					</div>
					<div class="description">
						{{seller.description}}/{{seller.deliveryTime}}分钟送达
					</div>
					<div v-if="seller.supports" class="supports">
						<span class="icon" :class="classMap[seller.supports[0].type]"></span>
						<span class="text">{{seller.supports[0].description}}</span>
					</div>
				</div>
				<div v-if="seller.supports" class="supports-count" @click="showDetail">
					<span class="count">{{seller.supports.length}}个</span>
					<i class="icon-thumb_up"> </i>
				</div>	
		  </div>
		  <div class="bulletin-wrapper"  @click="showDetail">
		  	<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
			<i class="icon-thumb_up"> </i>
		  </div>
		  <div class="backgroud">
		  	<img :src="seller.avatar" width="100%" height=100%>
		  </div>
		  <div v-show="detailShow" class="detail" transition="fade">
		  	<div class="detail-warpper clearfix">
		  		<div class="detail-main">
		  			<h1 class="name">{{seller.name}} {{seller.score}}</h1>
		  			<div class="star-wrapper">
		  				<star :size="48" :score="seller.score"></star>
		  			</div>
		  			<div class="title">
		  				<div class="line"></div>
		  				<div class="text">优惠信息</div>
		  				<div class="line"></div>
		  			</div>
		  			<ul v-if="seller.supports" class="supports">
		  				<li class="support-itme" v-for="item in seller.supports">
		  					<span class="icon" :class="classMap[seller.supports[$index].type]">
		  						
		  					</span>
		  					<span class="text">{{seller.supports[$index].description}}</span>
		  				</li>
		  			</ul>
		  			<div class="title">
		  				<div class="line"></div>
		  				<div class="text">商家公告</div>
		  				<div class="line"></div>
		  			</div>
		  			<div class="bulletin">
		  				<p class="content">
		  					{{seller.bulletin}}
		  				</p>
		  			</div>	
		  		</div>		
		  	</div>
		  	<div class="detail-close" @click="hideDetail">
		  		<i class="icon-remove_circle_outline"></i>
		  	</div>
		  </div>	
		</div>	
</template>
<script type="text/ecmascript-6">
  import star from 'components/star/star';
  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data() {
      return {
        detailShow: false
      };
    },
    methods: {
      showDetail() {
        this.detailShow = true;
      },
      hideDetail() {
        console.log(111);
        this.detailShow = false;
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'guarante', 'invoice', 'special'];
    },
    components: {
      star
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin.styl"
	.header
		color:#fff
		overflow:hidden
		position:relative
		background: rgba(7,17,27,0.5) 
		.bulletin-wrapper
			position:relative
			height:28px
			line-height:28px
			padding:0 22px 0 12px
			white-space: nowrap
			overflow:hidden
			text-overflow: ellipsis
			background: rgba(7,17,27,0.2) 
			.bulletin-title
				display: inline-block
				width:22px
				height:12px
				bg-image('bulletin')
				vertical-align: top 
				margin-top:8px
				background-size:22px 12px
				background-repeat:no-repeat
			.bulletin-text
				vertical-align: top
				margin: 0 4px
				font-size: 10px	
			.icon-thumb_up
				position:absolute
				font-size: 10px
				right:10px
				top:8px				
		.content-wrapper
			padding: 24px 12px 18px  24px
			font-size: 0
			position:relative
			img
				border-radius: 2px;
			.avatar
				display: inline-block
				vertical-align: top    
			.content
				display: inline-block
				margin-left: 16px
				.description
					margin-bottom:10px
					line-height:12px
					font-size: 12px
				.supports
					.text
						line-height:12px
						font-size: 10px
						vertical-align: top
					.icon
						display: inline-block
						width:12px
						height:12px
						margin-right:4px
						vertical-align: top
						background-size: 12px 12px
						background-repeat:no-repeat		
						&.decrease
							bg-image('decrease_1')
						&.discount
							bg-image('discount_1')
						&.guarantee
							bg-image('guarantee_1')	
						&.invoice
							bg-image('invoice_1')
						&.special
							bg-image('special_1')					
				.title
					margin: 2px 0 8px 0
					.brand
						width:30px
						height:18px
						vertical-align: top;
						display: inline-block
						bg-image('brand')
						background-size: 30px 18px
						background-repeat:no-repeat	
					.name
						margin-left:6px
						font-size: 16px
						line-height:18px
						font-weight: bold							
			.supports-count
				position:absolute
				right:12px
				bottom:14px
				padding:0 8px
				height:24px
				line-height:24px 
				border-radius: 14px;
				background: rgba(0,0,0.0.2)
				text-align: center
				.count
					vertical-align: top
					font-size: 10px
				.icon-thumb_up
					font-size: 10px
					line-height:24px
					margin-left:2px
		.backgroud
			position:absolute
			top:0
			left:0
			height:100%
			width:100%
			z-index:-1
			filter:blur(10px)
		.detail
			position:fixed
			top:0
			left:0
			z-index:100
			width:100%
			height:100%
			overflow:auto
			transition:all 0.5s
			backdrop-filter:blur(10px)  
			&.fade-transition
				opactity:1
				background: rgba(7,17,27,0.8) 
			&.fade-enter,&.fade-leave
				opactity:0
				background: rgba(7,17,27,0) 	 
			.detail-warpper
				min-height:100%
				width:100%	
				.detail-main
					margin-top:64px
					padding-bottom:64px
					.name
						line-height:16px
						text-align: center
						font-size: 16px
						font-weight: 700 
					.star-wrapper
						margin-top:18px
						padding:2px 0
						text-align: center	
					.title
						display: flex
						width:80%
						margin:28px auto 24px auto
						.text
							padding:0 12px
							font-size: 14px
							font-weight: 700
						.line
							flex:1
							position:relative
							top:-6px
							border-bottom:1px solid rgba(255,255,255,0.2)
					.bulletin
						width:80%
						margin:0 auto
						.content
							padding:0 12px
							line-height:24px
							font-size: 12px		
					.supports
						width:80%	
						margin:0 auto
						.support-itme
							padding:0 12px
							margin-bottom:12px
							font-size: 0
							.text
								font-size: 12px
								line-height:16px
							&:last-child
								margin-bottom:0	
							.icon
								padding:0 5px
								display: inline-block
								width:16px
								height:16px
								background-size: 16px 16px
								vertical-align: top;
								background-repeat: no-repeat
								&.decrease
									bg-image('decrease_2')	
								&.discount
									bg-image('discount_2')
								&.guarante
									bg-image('guarantee_2')	
								&.invoice
									bg-image('invoice_2')
								&.special
									bg-image('special_2')
						
			.detail-close
				position:relative
				width:32px
				height:32px
				margin:-64px auto 0 auto
				clear:both
				font-size: 32px
</style>